<template>
  <div class="fan-card__warp" v-if="id&&showCard">
    <div class="fan-card">
      <div class="fan-card__left">
        <div class="left__head-portrait">
          <yun-avatar :user-id="id" :src="userAvatar"></yun-avatar>
        </div>
        <div class="left__content">
          <div class="content-name">
            <span  @click="changeRoute('/project')">{{userNick}}</span>
            <yun-icon name="sex_man" size="12px" color="#00AAE6" pb="6px" v-if="gender===1"></yun-icon>
            <yun-icon name="sex_woman" size="12px" color="#00AAE6" pb="6px" v-if="gender===2"></yun-icon>
          </div>
          <div class="content-label">
            <div class="content-label__left">
              <p><span @click="changeRoute('/project')">人气 <span  class="label-number">{{statistics.visitedNum}}</span></span>
                ·
                <span  @click="changeRoute('/fans')">粉丝 <span class="label-number">{{statistics.fansNum}}</span></span>
                ·
                <span @click="changeRoute('/following')">关注 <span  class="label-number">{{statistics.followedNum}}</span></span>
              </p>
            </div>
            <div class="content-label__right">
              <p>
                <span @click="changeRoute('/project')">项目 <span  class="label-number">{{statistics.projectNum}}</span> </span>
                ·
                <span @click="changeRoute('/blog')">博客 <span   class="label-number">{{statistics.blogNum}}</span></span>
                ·
                <span @click="changeRoute('/answer')">回答 <span  class="label-number">{{statistics.questionReplyNum}}</span></span>
                ·
                <span  @click="changeRoute('/dynamic')">动态 <span class="label-number">{{statistics.postNum}}</span></span>
              </p>
            </div>
          </div>
          <p class="content-main">
            {{signature}}
          </p>
        </div>
      </div>
      <div class="fan-card__right" v-if="!isBlacklist">
        <yun-icon class="icon-menu" v-if="!from" name="down_arrow" size="8px" @mouseover.native="changeStateMenu1" @mouseleave.native="changeStateMenu2"></yun-icon>
        <transition  name="fade">
          <div class="fan-card__right-menu" @mouseover="changeStateMenu1" @mouseleave="changeStateMenu2" v-if="showMenu">
            <ul >
              <li @click.stop="dataPostToAddBak">添加备注</li>
              <li v-if="cardType==='fans'">移除粉丝</li>
              <li v-if="cardType==='fans'" @click.stop="dataPostToFollow">添加关注</li>
              <li v-if="cardType==='follow'" @click.stop="dataPostToCancelFollow">取消关注</li>
<!--              <li v-if="cardType==='follow'||cardType==='fans'" @click.stop="dataPostToBlack">加入黑名单</li>-->
<!--              <li v-if="cardType==='blackList'" @click.stop="dataPostToCancelBlack">移出黑名单</li>-->
            </ul>
          </div>
        </transition>
      </div>
      <div class="fan-card__right2" v-if="isBlacklist"><span>移除</span></div>
    </div>
  </div>
</template>

<script>
import config from "../../action/config";

export default {
  name: 'fanCard',
  data () {
    return {
      src: 'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg',
      isFocus: true,
      showMenu: false,
      isBlacklist: false,
      showCard:true,
      userAvatar:'',
      userNick:'',
      gender:'',
      signature:'',
      statistics:{},
    }
  },

  props:{
    info:{
      type:Object,
      default: ()=>({})
    },
    cardType:String,
    from:{
      type:String,
      default:''
    }
  },

  created(){
    this.dataGet2Info();
  },
  methods:{

    changeRoute(path){
      this.$router.push(this.dataGet2Path(path));
    },

    dataGet2Path(path){
      console.log(this.id);
        return '/u/'+this.id+path
    },

    dataGet2Info(){
      let info = this.info;
      if(info.userId){
        this.userAvatar = info.userAvatar;
        this.userNick = info.userNick;
        this.gender = info.gender;
        this.statistics = info.statistics||{};
        this.signature = info.signature;
        this.id = info.userId
      }
      if(info.itemId){
        this.userAvatar = info.cover;
        this.userNick = info.title;
        this.gender = info.gender;
        this.statistics = info.extra||{};
        this.signature = info.description;
        this.id = info.itemId;
      }
    },

    dataPostToAddBak(){
      this.$popupbox({
        title:'添加备注',
        name:'',
        onSubmit: (value,close)=>{
            this.$axios.$put(config.api.put.UserRemark.remark+this.id+'/remarks',{
              remarks:value
            }).then((res)=>{
              if(res.code===0){
                close();
                this.$message({
                  type:'success',
                  message:'添加用户备注成功!'
                })
              }else{
                this.$message({
                  type:'warning',
                  message:res.msg
                })
              }
            })
        }
      })

    },

    dataPostToFollow(){
      this.$axios.$post(config.api.post.User.follow+this.id+'/follower').then((response)=>{
        if(response.code===0){
          this.$message({
            type:'success',
            message:response.msg
          })
        }else{
          this.$message({
            type:'warning',
            message:response.msg
          })
        }
      })
    },

    dataPostToCancelFollow(){
      this.$axios.$delete(config.api.delete.User.unfollow+this.id+'/follower').then((response)=>{
        if(response.code===0){
          this.$message({
            type:'success',
            message:response.msg
          })
          this.showCard = false;
        }else{
          this.$message({
            type:'warning',
            message:response.msg
          })
        }
      })
    },

    dataPostToBlack(){
      this.$axios.$post(config.api.post.User.shielding+this.id).then((response)=>{
        if(response.code===0){
          this.$message({
            type:'success',
            message:response.msg
          })
          this.showCard = false;

        }else{
          this.$message({
            type:'warning',
            message:response.msg
          })
        }
      })
    },

    dataPostToCancelBlack(){
      this.$axios.$delete(config.api.delete.User.blacklist+this.id).then((response)=>{
        if(response.code===0){
          this.$message({
            type:'success',
            message:response.msg
          })
          this.showCard = false;

        }else{
          this.$message({
            type:'warning',
            message:response.msg
          })
        }
      })
    },


    changeStateMenu1(){
      clearTimeout(this.menuTime);
        this.showMenu = true
    },
    changeStateMenu2(){
      clearTimeout(this.menuTime);
        this.menuTime = setTimeout(()=>{
          this.showMenu = false
        },200)
    }

  },
}
</script>

<style lang="scss" scoped>
  .fan-card__warp{
    background-color: #fff;
    .fan-card{
      padding: 21*$length 24*$length;
      box-sizing: border-box;
      border-bottom: 1px dashed #EFEFEF;
      @extend %flex-row-spb;
      align-items: start;
      .fan-card__left{
        @extend %flex-row-spb;
        justify-items: flex-start;
        align-items: start;
        .left__head-portrait{
          height: 48*$length;
          width: 48*$length;
          margin-right: 10*$length;
        }
        .left__content{
          text-align: left;
          .content-name{
            @extend %cursorPointer;
            margin-bottom: 7*$length;
            > span{
              @include fontStyle(14,14,500,#2F2F2F,left);
            }
          }
          .content-label{
            @extend %cursorPointer;

            margin-bottom: 8*$length;
            @include fontStyle(12,17,500,#999,left);
            > div{
              display: inline-block;
              .label-number{
                color: #00AAE6;
              }
            }
            .content-label__left{
              margin-right: 26*$length;
            }
          }
          .content-main{
            @include fontStyle(12,17,500,#999,left);
            height: auto;
          }
        }
      }
      .fan-card__right{
        position: relative;
        width: 120*$length;
        flex-shrink:0;
        @extend %flex-row-spb;
        justify-content: flex-end;
        >span{
          @include fontStyle(14,20,500,#999,left);
        }
        .icon-menu{
          vertical-align: top;
        }
        .fan-card__right-menu{
          background-color: #fff;
          position: absolute;
          top: 30*$length;
          right: 0;
          width: 136*$length;
          box-shadow: 0 6*$length 20*$length rgba(0,0,0,.08);
          @include border-radius(4*$length);
          z-index: 300;
          li{
            @extend %cursorPointer;
            @extend %animate-transition;
            @include fontStyle(14,20,500,#666,center);
            height: 46*$length;
            line-height: 46*$length;
            &:hover{
              color:#00AAE6;
            }
          }
        }
      }
      .fan-card__right2{
        flex-shrink:0;
        @include fontStyle(14,20,500,#999,left);
      }
    }
  }
</style>
